import { useDispatch } from 'react-redux';
import { Input, Button, Form, Checkbox, Layout } from 'antd';
import { useNavigate } from 'react-router-dom';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import { useState } from 'react';
import { userLogin, userInfoGet } from '@/store/modules/user';
import { permissionRoutes } from '@/store/modules/permission';
import SvgIcon from '@/components/SvgIcon';
import { getAccount, setAccount } from '@/utils/auth';

function LoginForm({ className }) {
  const initialValues = getAccount();
  const remember = initialValues.isRemember || false;
  const [isRemember, setIsRemember] = useState(remember);
  const navigate = useNavigate();
  const dispatch = useDispatch();
  const toRole = () => {
    navigate('/system/roleList');
  };
  const onFinish = (values) => {
    const params = {
      vc_token: '',
      auth_type: 'vc',
      flag: '1',
      vc_code: '',
      isRemember,
      ...values,
    };
    dispatch(userLogin(params)).then(() => {
      dispatch(userInfoGet());
      dispatch(permissionRoutes()).then(() => {
        if (isRemember) {
          setAccount(params);
        }
        toRole();
      });
    });
  };
  const handleChange = (e) => {
    setIsRemember(e.target.checked);
  };
  return (
    <div className={`relative flex justify-center items-center ${className}`}>
      <SvgIcon
        name="login"
        className="absolute top-0 left-0 w-full h-full px-14"
      />
      <div className="w-80">
        <div className="mb-10">
          <div className="text-lg font-medium">登录 Uzi Admin</div>
          <div className="text-sm text-gray-400">欢迎您登录 Uzi Admin</div>
        </div>
        <Form
          name="basic"
          initialValues={initialValues}
          onFinish={onFinish}
          autoComplete="off"
        >
          <Form.Item
            name="username"
            rules={[
              {
                required: true,
                message: '账号名称不能为空',
              },
            ]}
          >
            <Input
              placeholder="请输入账号名称"
              type="icon-yonghu"
              prefix={<UserOutlined />}
            />
          </Form.Item>
          <Form.Item
            name="password"
            rules={[
              {
                required: true,
                message: '登录密码不能为空',
              },
            ]}
          >
            <Input.Password
              placeholder="请输入登录密码"
              prefix={<LockOutlined />}
            />
          </Form.Item>

          {/* <div className="flex space-x-2">
            <Form.Item
              className="flex-1"
              name="code"
              rules={[
                {
                  required: true,
                  message: '验证码不能为空',
                },
              ]}
            >
              <Input maxLength={4} placeholder="请输入验证码" />
            </Form.Item>

            <Image width={120} height={32} src="error" preview={false} />
          </div> */}
          <div className="flex justify-between">
            <Form.Item>
              <Checkbox defaultChecked={isRemember} onChange={handleChange}>
                记住密码
              </Checkbox>
            </Form.Item>
            <Button type="link">忘记密码</Button>
          </div>

          <Form.Item>
            <Button className="w-full mb-3" htmlType="submit" type="primary">
              登录
            </Button>
            <Button className="w-full" ghost type="primary">
              注册账号
            </Button>
          </Form.Item>
        </Form>
      </div>
      <Layout.Footer className="absolute bottom-4 left-0 w-full flex justify-center dark:bg-dark">
        Uzi Admin ©2023
      </Layout.Footer>
    </div>
  );
}
export default LoginForm;
